<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>

</head>
<body onload="init()">
<canvas id="mainCanvas" width="400px" height="300px"></canvas>
<script src="//cdn.bootcss.com/three.js/r83/three.min.js"></script>
<script type="text/javascript">
        function init() {
            var renderer = new THREE.WebGLRenderer({
                canvas: document.getElementById('mainCanvas')   //渲染器将和 Canvas 元素进行绑定
            });
            renderer.setClearColor(0x000000);       // Canvas 元素背景色
            
            var scene = new THREE.Scene();      //实例化场景
            
            var camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);    //定义照相机 以下是属性
            camera.position.set(25, 25, 25);
            camera.lookAt(new THREE.Vector3(0, 0, 0));
            scene.add(camera);          //将照相机加到场景中

            var material = new THREE.MeshBasicMaterial({    //实例化一个材料  定义属性
                color: 0xffff00,
                wireframe: true,
                visible:true
            });

            cube = new THREE.Mesh(new THREE.SphereGeometry(3, 18, 12), material);      //创建一个球体  加入材料
            
            scene.add(cube);                                                          //把长方形加到场景中
            
            renderer.render(scene, camera); //开始渲染
    }
</script>
</body>
</html>

<!--
    使用基本材质（BasicMaterial）的物体，渲染后物体的颜色始终为该材质的颜色，而不会
由于光照产生明暗、阴影效果。如果没有指定材质的颜色，则颜色是随机的。其构造函数
是：THREE.MeshLambertMaterial(opt) 其中， opt 可以缺省，或者为包含各属性的值。

常用的属性。
  visible ：是否可见，默认为 true
  side ：渲染面片正面或是反面，默认为正面 THREE.FrontSide ，可设置为反面
THREE.BackSide ，或双面 THREE.DoubleSide
  wireframe ：是否渲染线而非面，默认为 false
  color ：十六进制 RGB 颜色，如红色表示为 0xff0000
  map ：使用纹理贴图，详见 4.5 节



-->